﻿<!doctype html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>
        div.container {line-height: 1.6; padding-bottom: 20px;}
        textarea, input, select {margin: 4px;}
        input:not([type=checkbox]) {width: 100px;}
    </style>
</head>

<body>
<div class="container">
    <form onsubmit="return false;">
        <h4>Environment:</h4>
        <Label>Environment type: <select id="environment.type" name="environment.type"></select></Label>
        <button onclick='setEnv()'>Set</button>
        <br><br>
        <h4>Brush:</h4>
        <Label>Brush type: <select id="brush.type" name="brush.type"></select></Label>
        <label>Brush size: <input id="brush.size" value=".0001"></label>
        <label>Brush color: <input id="brush.color" value="#FF5533" type="color"></label>
        <button onclick='setBrush()'>Set</button>
        <br><br>
        <h4>Spectator Camera:</h4>
        <label>Status: <button onclick="spectatorOn()">On</button><button onclick="spectatorOff()">Off</button></label><br>
        <label>Mode:
            <button onclick="sendCommand('spectator.mode=stationary');">Stationary</button>
            <button onclick="sendCommand('spectator.mode=slowfollow');">Follow</button>
            <button onclick="sendCommand('spectator.mode=circular');">Circular</button>
            <button onclick="sendCommand('spectator.mode=wobble');">Wobble</button>
        </label><br><br>
        <h4>Show/Hide</h4>

        Main Canvas: <button onclick="sendCommand('spectator.show=strokes');">On</button><button onclick="sendCommand('spectator.hide=strokes');">Off</button>
        Selection Canvas: <button onclick="sendCommand('spectator.show=selection');">On</button><button onclick="sendCommand('spectator.hide=selection');">Off</button>
        UI: <button onclick="sendCommand('spectator.show=ui');">On</button><button onclick="sendCommand('spectator.hide=ui');">Off</button>
        Headset: <button onclick="sendCommand('spectator.show=headset');">On</button><button onclick="sendCommand('spectator.hide=headset');">Off</button>
        Panels: <button onclick="sendCommand('spectator.show=panels');">On</button><button onclick="sendCommand('spectator.hide=panels');">Off</button>
        Widgets: <button onclick="sendCommand('spectator.show=widgets');">On</button><button onclick="sendCommand('spectator.hide=widgets');">Off</button>
        User Tools: <button onclick="sendCommand('spectator.show=usertools');">On</button><button onclick="sendCommand('spectator.hide=usertools');">Off</button>
        </label><br><br>
        <label>Position: <input id="campos.x" value="0">,<input id="campos.y" value="11">,<input id="campos.z" value="0"></label><br>
        <label>Target: <input id="camtarget.x" value="0">,<input id="camtarget.y" value="11">,<input id="camtarget.z" value="-3"></label><br>
        <button onclick='setCam();'>Set</button><br><br>
        <label>Look:
            <button type="button" id='lookLeft'>←</button>
            <button type="button" id='lookUp'>↑</button>
            <button type="button" id='lookDown'>↓</button>
            <button type="button" id='lookRight'>→</button>
        </label>&nbsp;
        <label>Move:
            <button type="button" id='moveForward'>↑↑</button>
            <button type="button" id='moveLeft'>←</button>
            <button type="button" id='moveUp'>↑</button>
            <button type="button" id='moveDown'>↓</button>
            <button type="button" id='moveRight'>→</button>
            <button type="button" id='moveBack'>↓↓</button>
        </label>

        <br><br>
        <h4>Painting Mode:</h4>
        <label>Force painting On: <button onclick="sendCommand('brush.force.painting.on=1');">On</button><button onclick="sendCommand('brush.force.painting.on=0');">Off</button></label>
        <label>Force painting Off: <button onclick="sendCommand('brush.force.painting.off=1');">On</button><button onclick="sendCommand('brush.force.painting.off=0');">Off</button></label>

        <h4>Scripts:</h4>
        <Label>Tool Script: <select id="toolScripts" name="toolScripts"></select></Label>
        <button onclick='activateToolScript()'>Activate</button>
        <button onclick='deactivateToolScript()'>Deactivate</button>
        <br>
        <Label>Symmetry Script: <select id="symmetryScripts" name="symmetryScripts"></select></Label>
        <button onclick='activateSymmetryScript()'>Activate</button>
        <button onclick='deactivateSymmetryScript()'>Deactivate</button>
        <br>
        <Label>Pointer Script: <select id="pointerScripts" name="pointerScripts"></select></Label>
        <button onclick='activatePointerScript()'>Activate</button>
        <button onclick='deactivatePointerScript()'>Deactivate</button>
        <br>
        <Label>Background Scripts:<br>
            <select id="backgroundScripts" onchange='updateActiveBackgroundScripts()' name="backgroundScripts" multiple size="6"></select></Label>
        <p><em>Ctrl+click to toggle</em></p>
        <button onclick='activateAllBackgroundScripts()'>Background Scripts Enabled</button>
        <button onclick='deactivateAllBackgroundScripts()'>Background Scripts Disabled</button>
        <br><br>
        <h4>Actions:</h4>
        <button onclick="sendCommand('save');">Save Current Scene</button>
        <button onclick="sendCommand('export');">Export Current Scene</button>
        <button onclick="sendCommand('showfolder.exports');">Show Exports Folder</button>
        <br><br>
        <button onclick="sendCommand('new');">Clear Current Scene</button>
        <button onclick="sendCommand('brush.move.to=0,11,3'); sendCommand('draw.path=[-1,0,0],[1,0,0],[0,1,0],[-1,0,0]');">Test</button>
    </form>
</div>

<script>

    function configureSelect(id, items, defaultOption) {
        var menu = document.getElementById(id);
        for (var item of items) {
            var option = document.createElement("option");
            option.text = item;
            option.name = item;
            if (option.name === defaultOption) {option.selected = true}
            menu.add(option);
        }
    }

    var items = {{brushesJson}};
    configureSelect("brush.type", items, "Light");

    var items = {{environmentsJson}};
    configureSelect("environment.type", items, "Standard");

    var items = {{toolScripts}};
    configureSelect("toolScripts", items, items[0]);

    var items = {{symmetryScripts}};
    configureSelect("symmetryScripts", items, items[0]);

    var items = {{pointerScripts}};
    configureSelect("pointerScripts", items, items[0]);

    var items = {{backgroundScripts}};
    configureSelect("backgroundScripts", items);

    function sendCommand(command) {
        console.log(command);
        var xmlHttp = new XMLHttpRequest();
        var url = '/api/v1?' + command;
        xmlHttp.open('GET', url, false);
        xmlHttp.send(null);
    }

    function setBrush() {
        sendCommand('color.set.html=' + document.getElementById("brush.color").value.replace("#", ""));
        sendCommand('brush.size.set=' + document.getElementById("brush.size").value);
        sendCommand('brush.type=' + document.getElementById("brush.type").value);
    }

    function setEnv() {
        sendCommand('environment.type=' + document.getElementById("environment.type").value);
    }

    function activateToolScript() {
        sendCommand('scripts.toolscript.activate=' + document.getElementById("toolScripts").value);
    }
    function deactivateToolScript() {
        sendCommand('scripts.toolscript.deactivate');
    }
    function activateSymmetryScript() {
        sendCommand('scripts.symmetryscript.activate=' + document.getElementById("symmetryScripts").value);
    }
    function deactivateSymmetryScript() {
        sendCommand('scripts.symmetryscript.deactivate');
    }
    function activatePointerScript() {
        sendCommand('scripts.pointerscript.activate=' + document.getElementById("pointerScripts").value);
    }
    function deactivatePointerScript() {
        sendCommand('scripts.pointerscript.deactivate');
    }

    function updateActiveBackgroundScripts() {
        var selectList = document.getElementById("backgroundScripts");
        // Iterate through select multiple rows and send command to activate or deactivate
        for (var i = 0; i < selectList.options.length; i++) {
            var row = selectList.options[i];
            if (row.selected) {
                sendCommand('scripts.backgroundscript.activate=' + row.value);
            } else {
                sendCommand('scripts.backgroundscript.deactivate=' + row.value);
            }
        }
    }

    function activateAllBackgroundScripts() {
        sendCommand('scripts.backgroundscript.activateall');
    }

    function deactivateAllBackgroundScripts() {
        sendCommand('scripts.backgroundscript.deactivateall');
    }

    function setCam() {
        var position = `${document.getElementById("campos.x").value},${document.getElementById("campos.y").value},${document.getElementById("campos.z").value}`
        var target = `${document.getElementById("camtarget.x").value},${document.getElementById("camtarget.y").value},${document.getElementById("camtarget.z").value}`
        sendCommand('spectator.move.to=' + position);
        sendCommand('spectator.look.at=' + target);
    }

    var spectatorOn = function(e) {
        sendCommand("spectator.on");
        setCam();
    };

    var spectatorOff = function(e) {
        sendCommand("spectator.off");
    };

    var turnCamera = function(e) {
        if (e.target.id === "lookUp") {
            sendCommand("spectator.turn.x=15");
        } else if (e.target.id === "lookDown") {
            sendCommand("spectator.turn.x=-15");
        } else if (e.target.id === "lookLeft") {
            sendCommand("spectator.turn.y=-15");
        } else if (e.target.id === "lookRight") {
            sendCommand("spectator.turn.y=15");
        }
    }

    var moveCamera = function(e) {
        if (e.target.id === "moveUp") {
            sendCommand("spectator.move.by=0,1,0");
        } else if (e.target.id === "moveDown") {
            sendCommand("spectator.move.by=0,-1,0");
        } else if (e.target.id === "moveLeft") {
            sendCommand("spectator.move.by=-1,0,0");
        } else if (e.target.id === "moveRight") {
            sendCommand("spectator.move.by=1,0,0");
        } else if (e.target.id === "moveForward") {
            sendCommand("spectator.move.by=0,0,1");
        } else if (e.target.id === "moveBack") {
            sendCommand("spectator.move.by=0,0,-1");
        }
    }

    document.getElementById("lookUp").addEventListener('click', turnCamera);
    document.getElementById("lookDown").addEventListener('click', turnCamera);
    document.getElementById("lookLeft").addEventListener('click', turnCamera);
    document.getElementById("lookRight").addEventListener('click', turnCamera);

    document.getElementById("moveUp").addEventListener('click', moveCamera);
    document.getElementById("moveDown").addEventListener('click', moveCamera);
    document.getElementById("moveLeft").addEventListener('click', moveCamera);
    document.getElementById("moveRight").addEventListener('click', moveCamera);
    document.getElementById("moveForward").addEventListener('click', moveCamera);
    document.getElementById("moveBack").addEventListener('click', moveCamera);


</script>

</body>
</html>
